<template>
    <div class="mainUI">
      <div class="left">
        <div class="new-chat">
          <div class="new-chat-left">
            <!--<img src="../../assets/metaverse/images/加号1.png">-->
            <svg-icon icon-class="plus1" style="font-size: 20px;"/>
            <span>新建聊天</span>
          </div>
          <div class="new-chat-right">
            <img src="../../assets/metaverse/images/catalog.png">
          </div>
        </div>
        <div class="search-chat">
          <div class="search-key">
            <img src="../../assets/metaverse/images/searchLogo.png">
            <input placeholder="搜索提示" class="in-key">
          </div>
        </div>
        <div class="window-chat">
          <div class="chatItem" :class="isTrue1?'chat-action':''" @click="clickSwitch(1)">
            <div class="chat-item-left">
              <img src="../../assets/metaverse/images/session.png" class="sessionLog">
              <span>黄教授</span>
            </div>
            <div class="chat-item-right">
              <img src="../../assets/metaverse/images/delete.png" class="deleteLog">
            </div>

          </div>
          <div class="chatItem" :class="isTrue2?'chat-action':''"  @click="clickSwitch(2)">
            <div class="chat-item-left">
              <img src="../../assets/metaverse/images/session.png" class="sessionLog">
              <span>权教授</span>
            </div>
            <div class="chat-item-right">
              <img src="../../assets/metaverse/images/delete.png" class="deleteLog">
            </div>

          </div>

          <div class="chatItem" :class="isTrue3?'chat-action':''"  @click="clickSwitch(3)">
            <div class="chat-item-left">
              <img src="../../assets/metaverse/images/session.png" class="sessionLog">
              <span>焦教授</span>
            </div>
            <div class="chat-item-right">
              <img src="../../assets/metaverse/images/delete.png" class="deleteLog">
            </div>

          </div>
        </div>
        <div class="operator">
          <div class="operator-wrap">
            <div class="operator-item">
              <img src="../../assets/metaverse/images/delete.png">
              <span>清空对话</span>
            </div>

            <div class="operator-item">
              <img src="../../assets/metaverse/images/import.png">
              <span>导入对话</span>
            </div>

            <div class="operator-item">
              <img src="../../assets/metaverse/images/export.png">
              <span>导出对话</span>
            </div>

            <div class="operator-item">
              <img src="../../assets/metaverse/images/xhdpi.png">
              <span>浅色模式</span>
            </div>



          </div>

        </div>
      </div>
      <div class="center">
        <div class="personStyle">
          <img :src="doctorImg">
        </div>
        <div class="chatContentWrap">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入"
            style="font-size: 15px;font-weight: bold;"
            v-model="question">
          </el-input>

          <el-button type="primary" :loading="loading" v-if="loading" class="sendStyle">加载中</el-button>
          <el-button type="primary" @click="sendChat"  v-else class="sendStyle">发送</el-button>
          <!-- <input type="button" value="发送" @click="sendChat">-->
          <!--<select>
            <option></option>
            <option>发送历史病历</option>
            <option>发送历史诊断</option>
            <option>发送历史用药</option>
          </select>-->


          <!--问答区域 -->
          <div class="chatAnswer">
            <div class="answerDiv" v-html="answer"></div>
          </div>

        </div>

      </div>

    </div>
</template>

<script>
    export default {
        name: "mainUI",
        data(){
          return {
            question: '',
            loading: false,
            answer: '',
            isTrue1: true,
            isTrue2: false,
            isTrue3: false,
            doctorImg: require("@/assets/metaverse/images/黄老师.png"),
          }
        },
        methods:{
          clickSwitch(num){
            if(num == 1){
              this.isTrue1 = true;
              this.isTrue2 = false;
              this.isTrue3 = false;
              this.doctorImg = require("@/assets/metaverse/images/黄老师.png");
            }else if(num == 2){
              this.isTrue1 = false;
              this.isTrue2 = true;
              this.isTrue3 = false;
              this.doctorImg = require("@/assets/metaverse/images/权玉芬.jpg");
            }else if(num == 3){
              this.isTrue1 = false;
              this.isTrue2 = false;
              this.isTrue3 = true;
              this.doctorImg = require("@/assets/metaverse/images/jiao.png");
            }
          },
          sendChat(){
            this.loading = true
            console.log("发送数据了",this.question)
            let question = this.question
            this.question = "";
            let data = {
              knowledge_base_id:"byyl",
              question:question,
              history:[]
            }
            this.sendMsg(data,ev=>{
              console.log(ev.data)
              if(ev.data.indexOf("question") == -1){
                this.answer += ev.data
              }
              if(ev.data.indexOf("question") !== -1){
                let d = JSON.parse(ev.data);

                if(d.flag == "start"){
                  this.answer = this.answer +"<br>"+"问："+d.question+"<br> 答：";
                }
                if(d.flag == "end"){
                  this.loading = false
                }
              }
            })
          },
        }
    }
</script>

<style scoped>
.chatAnswer{
    position: absolute;
    background: rgba(145,147,156,0.7);
    width: 53%;
    max-height: 800px;
    /*height: 400px;*/
    bottom: 130px;
    color: white;
    overflow-y: auto;
    border-radius: 10px;
    padding: 0px 10px;
}

.sendStyle{
  background: #4058D6;font-size: 25px;letter-spacing: 10px;
}
.mainUI{
  height: 100%;
  display: flex;
  flex-direction: row;
  color: white;
}
.left{
  width: 14%;
  background: #1E2332;
  display: flex;
  flex-direction: column;
}

.left .new-chat{
  flex: 1;
  display: flex;
  flex-direction: row;
}

.new-chat-left{
  height: 50px;
  width: 70%;
  margin: 10px 5px 10px 5px;
  border: 1px solid #4B4F5B;
  border-radius: 5px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.new-chat-left span{
  margin-left: 10px;
}
.new-chat-right{
  height: 50px;
  width: 30%;
  border: 1px solid #4B4F5B;
  border-radius: 5px;
  display: flex;
  justify-content:center;
  align-items: center;
  margin: 10px 5px 10px 5px;
}
.left .search-chat{
  flex: 1;
}

.search-key{
  height: 50px;
  margin: 10px 5px 10px 5px;
  border: 1px solid #4B4F5B;
  border-radius: 5px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.in-key{
  width: 55%;
  height: 30px;
  margin-left: 10px;
  border: none;
  background: #1E2332;
  color: white;
  font-size: 15px;
}
.left .window-chat{
  flex: 8;
}
.window-chat .chatItem{
  height: 50px;
  margin: 10px 5px 10px 5px;
  border-radius: 5px;
  display: flex;
  cursor: pointer;
}
.chat-action{
  background: #4058D6;
}
.chat-item-left{
  height: 50px;
  display: flex;
  justify-content:center;
  align-items: center;
  flex: 2;
}
.chat-item-left .sessionLog{

}
.chat-item-left span{
  margin-left: 20px;
}
.chat-item-right{
  height: 50px;
  display: flex;
  justify-content:center;
  align-items: center;
  flex: 1;
}

.left .operator{
  flex: 3;
}

.operator .operator-wrap{
  height: 100%;
  width: 95%;
  border-top: 1px solid #4B4F5B;
  display: flex;
  flex-direction: column;
}
.operator-item{
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.operator-item img{
  margin-left: 45px;
}
.operator-item span{
  margin-left: 20px;
}
.center{
  width: 86%;14
  background: #2B3041;
  display:flex;
  flex-flow: column; /*垂直排列*/
  justify-content: space-between;/*两端对齐*/
}

.personStyle{
  background: url("../../assets/metaverse/images/背景5.jpg");
  background-size: 100% 100%;
  height: 90%;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.personStyle img{
  width: 25%;
  height: 60%;
}
.chatContentWrap{
  display: flex;
  flex-direction: row;
}
.right{
  width: 14%;
  background: #1E2332;
}
.database-type{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
}
.database-active{
  color: #6A92FF;
  padding-bottom: 2px;
  border-bottom: 1px solid #6A92FF;
}
.database-type .database-anli{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

</style>
